<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">


    <style>
        .container {
            /*background-color: #d6ff40;*/
        }

        .btn-lg {
            background-color: red;
        }

        .btn:hover,
        .btn:focus {
            color: blue;
        }

        img {
            background-color: red;
        }
    </style>
</head>
<body>
<h1>你好，世界！</h1>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
        <div class="col-md-3 col-md-offset-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img src="images/bdlogo.gif" alt="" width="100%">
        </div>
    </div>


    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>

    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>

    <div class="row">
        <div class="col-sm-9" style="background-color: red">
            Level 1: .col-sm-9
            <div class="row" style="background-color: #fff;">
                <div class="col-xs-8 col-sm-6" style="background-color: blue">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6" style="background-color: yellow">
                    Level 2: .col-xs-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>


    <dl class="dl-horizontal">
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>estibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
            Donec id elit non mi porta gravida at eget metus.
        </dd>
    </dl>

    <pre>- (BOOL)isPureEnglishCharacters:(NSString *)string {
    NSString *characterRegex = @"^[a-zA-Z]*$";
    NSPredicate *englishTest = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", characterRegex];
    return [englishTest evaluateWithObject:string];
}</pre>

    <div class="table-responsive">
        <table class="table table-bordered table-responsive table-hover table-condensed">
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
                <th>密码</th>
            </tr>
            <tr>
                <td>001001</td>
                <td>002001</td>
                <td>003001</td>
            </tr>

            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <tr>
                <td>001</td>
                <td>002</td>
                <td>003</td>
            </tr>
            <!-- On rows -->

            <!-- On cells (`td` or `th`) -->
            <tr>
                <td class="active">123123123123123123123</td>
                <td class="success">123123123123123123123</td>
                <td class="warning">123123123123123123123</td>
                <td class="danger">123123123123123123123</td>
                <td class="info">123123123123123123123</td>
                <td class="danger">123123123123123123123</td>

                <td class="danger">123123123123123123123</td>

                <td class="danger">123123123123123123123</td>
                <td class="danger">123123123123123123123</td>
                <td class="danger">123123123123123123123</td>

                <td class="danger">123123123123123123123</td>


            </tr>
        </table>
    </div>


    <form role="form">
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default col-md-offset-2 btn-link">Submit</button>
    </form>
</div>


<div class="container">
    <button class="btn btn-primary btn-block btn-lg">button</button>
    <a class="btn btn-primary btn-block btn-lg" href="#">button</a>
    <input type="button" class="btn btn-primary btn-block btn-lg" value="#">
    <input type="submit" class="btn btn-primary btn-block btn-lg" value="#">
    <input type="reset" class="btn btn-primary btn-block btn-lg" value="#">
</div>


<div class="row">
    <img src="..." alt="..." class="img-rounded" style="width:140px; height: 140px;">
    <img src="..." alt="..." class="img-circle" style="width:140px; height: 140px;">
    <img src="..." alt="..." class="img-thumbnail" style="width:140px; height: 140px;">
</div>

<div class="container">
    <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>

</div>

<h1 class="page-header">
    hh1h1h1h1
</h1>


<div class="container">
    <div class="pull-left" style="width:500px; height: 300px; background-color: red">


    </div>
    <div class="pull-right" style="width:400px; height: 500px; background-color: red">

    </div>
</div>

<div class="container visible-lg-1200px" style=" height: 500px; background-color: red">

</div>

<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle center-block" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
</div>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>
<h1 class="page-header">
    hh1h1h1h1
</h1>

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation" style="background-color: red">
    <div class="container" style=" height: 100px; background-color: white">
        <span class="glyphicon glyphicon-star">不许睡觉</span> Star
    </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--&lt;!&ndash; Include all compiled plugins (below), or include individual files as needed &ndash;&gt;-->
<script src="js/bootstrap.min.js"></script>
</body>

<script>
	$('.close').click(function () {
		$(this).parent().hide();
	});
</script>

</html>